<template>
	<view class="">
		<view class="apply_box" v-if="pageData==1">
			<view class="header_bg">
				<img src="@/static/guess/check_bg.png"/>
			</view>
			<view class="dec">
				<view class="deep" v-for="item in decData">
					<img :src="item.url" />
					<view class="content">
						{{item.content}}
					</view>
				</view>
				
			</view>
			<view class="button" @click="postApply">
				申请成为核销员
			</view>
		</view>
		<view class="success" v-else>
			<view>
				<img src="@/static/guess/check_sucess.png" />
			</view>
			<span>您的申请已提交成功</span>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pageData:1,
				decData:[
					{url:require('@/static/guess/check_d1.png'),content:'点击下方按钮，申请成为核销人员	'},
					{url:require('@/static/guess/check_d2.png'),content:'中奖者到兑奖地点出示奖品二维码核销人员打开微信扫一扫，扫码核销	'},
					{url:require('@/static/guess/check_d3.png'),content:'核销成功后，为用户发放奖品'}
				]
			}
		},
		methods:{
			postApply(){
				this.pageData=2
			}
		},
		mounted() {
			this.$setTitle('申请核销员')
		}
	}
</script>

<style lang="scss" scoped>
	.apply_box{
		width: 750rpx;
		min-height: 100vh;
		background: #E9F6FF;
		.header_bg{
			line-height: 0;
			img{
				width: 750rpx;
				height: 420rpx;
			}
		}
		.dec{
			position: relative;
			z-index: 9;
			margin:-73rpx 30rpx 0;
			width: 630rpx;
			height: 574rpx;
			background: #FFFFFF;
			box-shadow: 0px 3rpx 15rpx 1rpx rgba(71, 132, 255, 0.21);
			border-radius: 20rpx;
			padding: 60rpx 30rpx;
			.deep{
				img{
					width: 247rpx;
					height: 64rpx;
				}
				.content{
					margin-top: 30rpx;
					line-height: 50rpx;
					font-size: 36rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
				}
				&:not(:first-child){
					margin-top: 40rpx;
				}
			}
		}
		.button{
			width: 480rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #468AFF;
			border-radius: 44rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin: 60rpx 135rpx 0;
			&:active{
				opacity: 0.85;
			}
		}
	}
	.success{
		margin: 106rpx 213rpx 0;
		text-align: center;
		&>view{
			line-height: 0;
			img{
				width: 302rpx;
				height: 250rpx;
			}
		}
		span{
			line-height: 50rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
		}
	}
</style>